<template>
  <el-col :span="24">
    <el-col :span="24" style="height: 80px;text-align: left">

      <el-select v-model="value" placeholder="请选择语言" class="me-5" filterable>
        <el-option :value="items.value" v-for="items in options" :key="items.value" :label="items.label">
        </el-option>
      </el-select>
      <i class="el-icon-refresh" style="animation: rotating 2s linear infinite reverse;"></i>
      <el-select v-model="value2" placeholder="请选择语言" class="ms-5" filterable>
        <el-option :value="items.value" v-for="items in options2" :key="items.value" :label="items.label">
        </el-option>
      </el-select>

      <el-button style="width: 130px" class="ms-3" @click="clear" plain>清空</el-button>
    </el-col>

    <el-col :span="24">
      <el-col :span="12" style="height: 200px">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="fromBox"
          :autosize="{ minRows: 5}"
          maxlength="100"
          show-word-limit
          @input="fromBoxChange"
          style="font-size: 22px;font-weight: 500;padding:8px"
        >
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-input
          type="textarea"
          v-model="toBox"
          :autosize="{ minRows: 5}"
          show-word-limit
          readonly
          resize="none"
          style="font-size: 22px;font-weight: 500;padding:8px;outline: none"
        >

        </el-input>
      </el-col>


    </el-col>
    <el-col :span="24" style="text-align: left">
      由百度翻译提供API
    </el-col>
  </el-col>
</template>

<script>
import sign from '@/translate/translate'

export default {
  name: 'translate',
  data () {
    return {
      value: '',
      value2: '',
      fromBox: '',
      toBox: '',
      options: [
        {
          value: 'auto',
          label: '自动检测'
        },
        {
          value: 'zh',
          label: '中文'
        },
        {
          value: 'en',
          label: '英文'
        },
        {
          value: 'wyw',
          label: '文言文'
        },
        {
          value: 'jp',
          label: '日语'
        }
      ],
      options2: [
        {
          value: 'zh',
          label: '中文'
        },
        {
          value: 'en',
          label: '英文'
        },
        {
          value: 'wyw',
          label: '文言文'
        },
        {
          value: 'jp',
          label: '日语'
        }
      ]
    }
  },
  methods: {
    fromBoxChange (value) {
      if (this.value == '' || this.value2 == '') {
        this.$message.warning('请选择语言类型')
        return
      }

      if (value == '') {
        this.toBox = ''
        return
      }
      sign.translate(value, this.value, this.value2).then(res => {
        // console.log(res)
        let str = ''
        for (let i = 0; i < res.trans_result.length; i++) {
          str += res.trans_result[i].dst + '\r'
        }
        this.toBox = str
      })
    },
    clear () {
      this.fromBox = ''
      this.toBox = ''
    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {

  width: 2px;

  height: 2px;

  background-color: #F5F5F5;

}

/*定义滚动条轨道

内阴影+圆角*/

::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);

  border-radius: 2px;

  background-color: #F5F5F5;

}

/*定义滑块

内阴影+圆角*/

::-webkit-scrollbar-thumb {

  border-radius: 2px;

  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);

  background-color: #555;

}
</style>
